<template>
	<view class="page">
		<view class="" v-if="orderList.length">

			<view class="history" v-for="(item,index) in orderList" :key="index">
				<view class="history_top">
					<view class="ordernum">
						<view class="jifen">积分</view>
						订单编号：{{item.order_no}}
					</view>
					<view class="state">
						<view v-if="item.state == 0">已退款</view>
						<view v-else-if="item.state == 1">待付款</view>
						<view v-else-if="item.state == 2">待发货</view>
						<view v-else-if="item.state == 3">待收货</view>
						<view v-else-if="item.state == 4">已完成</view>
					</view>
				</view>
				<view class="info" @tap="todetail(item.id)">
					<image :src="item.img" mode="widthFix"></image>

					<view class="title">{{item.goods_name}}</view>
				</view>

				<view class="needintegral">
					<view>× {{item.num}}</view>
					兑换积分：<text>{{item.price}}</text>积分
				</view>
				<view class="bottom_confirm" v-if="item.state == 3">
					<view class="confirm_receipt" @tap="confirmReceipt(item.id,index)">确认收货</view>
				</view>
				<view class="orderbtn" v-if="item.state == 1">
					<view class="orderbtn_i orderbtn_left" @tap="cancelOrder(item.id,item.index)">
						取消订单
					</view>
					<view class="orderbtn_i orderbtn_right" @tap="topay(item.id)">
						立即支付
					</view>
				</view>
			</view>
			<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		</view>

		<sc-no v-if="!orderList.length" :noStatus="btnshowflag" @navtive="navtive" url="add_images/no_changehistory.png" nofont="暂无积分兑换记录" width="30%" noBtn="去登录"></sc-no>
		<shop-loading v-if="shopLoad"></shop-loading>
		<uni-login ref='login' @success="loginSuccess"></uni-login>
		<sc-home></sc-home>
	</view>
</template>

<script>
	import {
		integralOrderList,
		integralcancel
	} from '@/common/integral.js';
	import {receivingGoods} from '@/common/order.js';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import scNo from '@/components/sc-no/sc-no.vue';
	import list from '@/mixins/list.js'
	export default {
		components: {
			uniLoadMore,
			scNo
		},
		data() {
			return {
				Url: this.Imgurl,
				orderList: [],
				shopLoad: true,
				btnshowflag:false
			}
		},
		mixins: [list],
		onShow() {
			this.getData()
		},
		methods: {
			navtive(){
				if(!uni.getStorageSync('token') && uni.getSystemInfoSync().version){
					this.login()
				}
			},
			login() {
				console.log("触发")
				if(uni.getSystemInfoSync().version){
				   this.$refs.login.show = true;	
				}
			},
			loginSuccess(){
				uni.setStorageSync('mineRefresh','false')
				this.getData()
			},
			getData() {
				this.shopLoad = true;
				console.log(this.page)
				let params = {
					page: this.page,
				}
				integralOrderList(params).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.btnshowflag = false
						var order = res.msg.data
						if (order.length) {
							this.orderList = order
							this.page = res.msg.current_page
							this.last_page = res.msg.last_page
						}
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.loadingType = res.msg.last_page > 1 ? 0 : 2;
						this.shopLoad = false;
					}else if(res.code == 4){
						this.btnshowflag=true
						this.shopLoad = false;
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
					}else {
						this.toast(res.msg)
						this.shopLoad = false;
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
					}
				}).catch()
			},
			getmoreNews() {
				if (this.loadingType !== 0) { //loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中'
				});
				if (this.page == this.last_page) {
					uni.hideLoading();
					uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
				} else {
					this.page++;
					let params = {
						page: this.page
					}
					var that = this
					integralOrderList(params).then(res => {
						var itemProduct = res.msg.data
						that.orderList = that.orderList.concat(itemProduct)
						this.loadingType = this.page == this.last_page ? 2 : 0
					}).catch()
					uni.hideLoading();

				}
			},
			todetail(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pageD/order/orderdetail?id=' + id + '&type_state=2' //type_state:区分商品类型（0：秒杀商品，1：普通商品，2：积分商品，3：拼团商品）
				})
			},
			cancelOrder(id, key) {
				uni.showModal({
					title: '提示',
					content: '您确定要取消该订单吗？',
					showCancel: true,
					success: res => {
						if (res.confirm) {

							this.toast(res)
							console.log("取消订单")
							integralcancel({ id: id }).then(res => {
								console.log(res)
								if (res.code == 1) {
									this.getData()
								} 
								this.toast(res.msg)
								
							}).catch()

						}
					}
				});
			},
			confirmReceipt(id,key) {
				uni.showModal({
					title: '提示',
					content: '确定要确认收货吗？',
					showCancel: true,
					success: res => {
						if (res.confirm) {
							receivingGoods({id:id,type:2}).then(res=>{
								if(res.code == 1){
									this.getData()
								}
								this.toast(res.msg)
								console.log(res)
							}).catch()
						}
					}
				});
			},
			topay(id) {
				let data = {
				    order_id:id,
				    type:2
				}
				let da = JSON.stringify(data)
				 uni.navigateTo({
				    url: '/pageB/cashierDesk/cashierDesk?data='+da
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding-bottom: 20upx;
	}

	.history {
		width: calc(100% - 30upx);
		margin: auto;
		border-radius: 10upx;
		background-color: #FFFFFF;
		padding: 20upx 15upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-top: 20upx;

		.history_top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 15upx;

			.ordernum {
				font-size: 28upx;
				color: #333333;
				display: flex;
				justify-content: flex-start;

				.jifen {
					margin-right: 10upx;
					padding: 0 14upx;
					font-size: 26upx;
					color: #fff;
					border-radius: 6upx;
					background: linear-gradient(70deg, #FE972C 0%, #FFC150 100%);
				}
			}

			.state {
				font-size: 28upx;
				color: #FF2842;
			}
		}

		.info {
			display: flex;
			font-size: 30upx;

			image {
				width: 130upx;
				height: 130upx;
				border-radius: 10upx;
			}

			.title {
				flex: 1;
				margin-left: 30upx;
				height: 40upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}


		.needintegral {
			font-size: 24upx;
			color: #999999;
			text-align: right;

			text {
				font-size: 28upx;
				color: #333333;
				font-weight: bold;
				padding-right: 5upx;
			}
		}

		.bottom_confirm {
			margin-top: 18upx;
			border-top: 2upx solid #f8f8f8;
			padding-top: 15upx;
			font-size: 28upx;
		}

		.confirm_receipt {
			float: right;
			background: #FF2842;
			padding: 6upx 16upx;
			color: #fff;
			border-radius: 10upx;
		}

		.orderbtn {
			margin-top: 15upx;
			display: flex;
			justify-content: flex-end;
			border-top: 2upx solid #f8f8f8;
			padding-top: 15upx;

			.orderbtn_i {
				width: 160upx;
				height: 50upx;
				text-align: center;
				line-height: 50upx;
				border-radius: 8upx;
				font-size: 24upx;
			}

			.orderbtn_left {
				border: 2upx solid #E1E1E1;
				box-sizing: border-box;
				color: #666666;
				margin-right: 10upx;
			}

			.orderbtn_right {
				background-color: #FF2842;
				color: #FFFFFF;
			}
		}
	}

	.nohistory {
		width: 100%;
		overflow: hidden;
		text-align: center;

		image {
			width: 227upx;
			height: 236upx;
			display: block;
			margin: auto;
			margin-top: 100upx;
		}

		text {
			margin-top: 20upx;
			font-size: 28upx;
			color: #999999;
		}
	}
</style>
